<template>
  <ex-dialog width="700px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm"
      v-loading="loading">
      <el-form-item label="预警模型名称：" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入预警模型名称" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="预警分类：" prop="type">
        <el-select placeholder="请选择" v-model="ruleForm.type" style="width: 400px;">
          <el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预警端：" prop="" ref="sideIdListRef">
        <el-checkbox-group v-model="ruleForm.sideIdList">
          <el-checkbox label="1">监管端</el-checkbox>
          <el-checkbox label="2">保险端</el-checkbox>
        </el-checkbox-group>
        <!-- <el-checkbox v-model="ruleForm.coolingOffType" true-label="1" false-label="2" @change="checkboxChange">保险端</el-checkbox>
        <el-checkbox v-model="ruleForm.coolingOffType" true-label="1" false-label="2" @change="checkboxChange">监管端</el-checkbox> -->
      </el-form-item>
      <el-form-item label="预警逻辑：" prop="">
        <span>{{ ruleForm.detail }}</span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="editForm('ruleForm')" :loading="submitLoading">保存</el-button>
    </span>
  </ex-dialog>
</template>
<script>
  import {
    waringConfigDetail,waringConfigEdit
  } from "@/api/setting/warningModel";
  import Loading from "@/components/Loading/index";
  import Editor from '@/components/Editor';

  export default {
    components: {
      Loading,
      Editor,
    },
    props: {
      visible: Boolean,
      id: String,
    },
    data() {
      return {
        title: '编辑',
        loading: false,
        submitLoading: false,
        options:[],
        ruleForm: {
          id: "", //区域名称
          name: '', //预警模型名称
          sideIdList: [], //预警端数组 1 监管端 2 保险端
          type: '', //预警分类 gov_warning_type
        },
        rules: {
          name: [{
            required: true,
            message: "请输入预警模型名称",
            trigger: ['blur', 'change']
          }, ],
          type: [{
            required: true,
            message: "请选择预警分类",
            trigger: ['blur', 'change']
          }],
          sideIdList: [{
            required: true,
            message: "请选择预警端",
            trigger: ['blur', 'change']
          }, ],
        },
        editId: '', //编辑id
      };
    },
    computed: {},
    created() {
      this.getDict()
      this.getInfo()
    },
    methods: {
      getDict() {
        var dictType = "gov_warning_type";
        this.$getSelectList(dictType)
        .then((res) => {
          var arr = [{
            id: "",
            value: "全部",
          }, ];
          this.options = arr.concat(res.result[0].dictList);
        })
        .catch(() => {});
      },
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      getInfo() { //获取信息详情
        this.loading = true
        waringConfigDetail(this.id).then((res) => {
            this.ruleForm = res.result
            // setTimeout(() => {
            //   this.$refs['sideIdListRef'].clearValidate();
            // }, 10)
            setTimeout(() => {
              this.loading = false;
            }, 500)
          })
          .catch(() => {
            this.loading = false;
          });
      },
      editForm(formName) {//保存
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var params = {
              ...this.ruleForm
            };
            this.submitLoading = true
            waringConfigEdit(params).then((res) => {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$emit('success')
                  this.handleClose()
                  this.submitLoading = false
                }, 500);
              })
              .catch(() => {
                this.submitLoading = false;
              });

          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }

</style>
